<template>
  <a-modal
    v-model:open="open"
    :title="props.title"
    @cancel="modelCancel"
    :width="props.width"
    @ok="submitOk"
  >
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      :label-col="{ span: 4 }"
    >
      <a-form-item
        label="分类名称"
        name="name"
        :rules="[{ required: true, message: '分类名称不可为空' }]"
      >
        <a-input v-model:value="formState.name" placeholder="请输入分类名称" />
      </a-form-item>
      <a-form-item label="排序">
        <a-form-item name="input-number" no-style>
          <a-input-number v-model:value="formState.sort" :min="1" :max="100" />
        </a-form-item>
      </a-form-item>
      <a-form-item label="缩略图" name="picUrl">
        <PictureUploader
          biz-type="wallpaper_categories_thumbnail"
          v-model:value="formState.picUrl"
          :on-change="(url) => (formState.picUrl = url)"
        ></PictureUploader>
      </a-form-item>
      <a-form-item name="selected" label="精选">
        <a-switch v-model:checked="formState.selected" :checked-value="1" :un-checked-value="0" />
      </a-form-item>
      <a-form-item name="enabled" label="状态">
        <a-switch v-model:checked="formState.enabled" :checked-value="1" :un-checked-value="0" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import PictureUploader from "../../../../components/PictureUploader.vue";
import {
  WallpaperCategoriesAddReqDTO,
  WallpaperCategoriesUpdateReqDTO,
  WallpaperCategoriesVo,
} from "../../../../api/globals";
import Api from "../../../../api";
import { message } from "ant-design-vue";

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  onCancel: () => {},
  onOk: () => {},
  width: 600,
  title: "",
});
const open = ref<boolean>(props.modelValue);
const formState = reactive<
  | WallpaperCategoriesAddReqDTO
  | WallpaperCategoriesUpdateReqDTO
  | WallpaperCategoriesVo
>(props.record);

interface Props {
  modelValue: boolean;
  onOk: () => void;
  onCancel: () => void;
  title?: string;
  width?: number;
  record: WallpaperCategoriesVo;
}

const submitOk = async () => {
  if (!props.record?.id) {
    try {
      // 添加
      const result = await Api.general.addWallpaperCategories({
        data: formState as any,
      });
      if (result.code === 0) {
        message.success("添加成功");
      } else {
        message.error("添加失败，" + result.msg);
      }
    } catch (error) {
      message.error("添加失败，服务器错误");
    }
  } else {
    // 更新
    try {
      const result = await Api.general.updateWallpaperCategories({
        data: formState as any,
      });
      if (result.code === 0) {
        message.success("更新成功");
      } else {
        message.error("更新失败，" + result.msg);
      }
    } catch (error) {
      message.error("更新失败，服务器错误");
    }
  }
  props.onOk();
};

// 监听 modelValue 的变化，并更新 open 的值
watch(
  () => props.modelValue,
  (newVal) => {
    open.value = newVal;
  },
);
watch(
  () => props.record,
  (newVal) => {
    if (newVal ?? "") {
      formState.id = newVal?.id;
      formState.name = newVal?.name;
      // @ts-ignore
      formState.picUrl = newVal?.picUrl;
      // @ts-ignore
      formState.selected = newVal?.selected;
      formState.sort = newVal?.sort;
      formState.enabled = newVal?.enabled;
    }
  },
);

const modelCancel = () => {
  open.value = false;
  props.onCancel();
};
</script>
